<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/flexible.js"></script>
		<!-- <script src="js/echarts.min.js"></script>-->
		<script src="js/echarts新版.js"></script>
		<script>
			window.onload=function(){
				var chartDom = document.getElementsByClassName('main')[0];
				var myChart = echarts.init(chartDom);
				var option;
				var colors=['red','orange','yellow','green','aqua','blue','purple']
				option = {
				  title: {
				    text: 'Referer of a Website',
				    subtext: 'Fake Data',
				    left: 'center'
				  },
				  tooltip: {
				    trigger: 'item',
					// formatter:"a:{a};b:{b};c:{c},d:{d}%,e:{e}"
				  },
				  legend: {
				    orient: 'vertical',
				    left: 'left'
				  },
				  series: [
				    {
				      name: 'Access From',
				      type: 'pie',
				      radius: ['40%', '70%'],
				      data: [
				        { value: 1048, name: 'Search Engine' },
				        { value: 735, name: 'Direct' },
				        { value: 580, name: 'Email' },
				        { value: 484, name: 'Union Ads' },
				        { value: 300, name: 'Video Ads' }
				      ],
					  roseType: 'radius',
					itemStyle: {
					  borderRadius: 50,
					  borderColor: '#000000',
					  borderWidth: 5
					},
					label: {
						show: true,
					  },
					  labelLine:{
						  show:true,
						  length:60,
						  length2:10
					  },
				      emphasis: {
				        itemStyle: {
				          // shadowBlur: 10,
				          // shadowOffsetX: 0,
				          // shadowColor: 'rgba(0, 0, 0, 0.5)'
				        },
						label: {
						  show: true,
						  fontSize: 15,
						  fontWeight: 'bold'
						}
				      }
				    }
				  ]
				};
				option && myChart.setOption(option);
				window.addEventListener('resize',()=>{
					myChart.resize()
				})
			}
		</script>
		<div style="width: 11rem;height: 8rem;margin-top: 50px;">
			<div class="main" style="width: 9rem;height: 5rem;margin-top: 50px;"></div>
		</div>
	</body>
</html>